<template>
  <div class="reservation">
    <div class="top">
      <Input placeholder="请输入用户名/手机号" @search="handleSearch" />
      <!-- <el-form label-width="120px">
        <el-form-item label="设计师筛选:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>-->
    </div>
    <div class="bottom">
      <el-table :data="tableData" style="width: 100%" :height="height">
        <el-table-column prop="name" label="用户" width="180" />
        <el-table-column prop="name" label="昵称" width="180" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="designer_name" label="设计师" />
        <el-table-column prop="message" label="备注" />
      </el-table>
    </div>
    <Pagination class="pagination" />
  </div>
</template>
<script>
import Input from "@/common/input";
import Pagination from "@/common/pagination";
import Resize from "@/common/mixins/resize";
import { getReverseList } from "@/api/http/designer";
import { param } from "../../utils";
export default {
  components: {
    Input,
    Pagination
  },
  mixins: [Resize],
  data() {
    return {
      designerId: 0,
      keywords: "",
      defaultHeight: 280,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        }
      ],
      tableData: [],
      value: ""
    };
  },
  created() {
    if (this.$route.query.designerId) {
      this.designerId = this.$route.query.designerId;
      var params = {
        designer_id: this.designerId
      };
      this.getReverseList(params);
    }else{
      this.getReverseList();
    }
  },
  methods: {
    // 获取预约记录列表
    getReverseList(params) {
      getReverseList(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    handleSearch(query) {
      var params = {
        keywords: query
      };
      if (this.designerId) {
        params.designer_id = this.designerId;
      }
      this.getReverseList(params);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
@import "@/styles/el-pagination.scss";
.top {
  display: flex;
  align-items: center;
  .el-form-item {
    margin: 0;
  }
}
.bottom {
  margin-top: 20px;
}
</style>
